<template>
    <div class="timing-box">

        <template v-if="this.type == 'big'">
            <p>{{ y }}</p>
            <div class="box-bottom">
                <div class="line" :class="y + '-' + m + '-line'"></div>
                <div class="circle-big" :class="y + '-' + m + '-circle'"></div>
            </div>
        </template>
        <template v-if="this.type == 'mini'">
            <p>{{ m }}</p>
            <div class="box-bottom">
                <div class="line" :class="y + '-' + m + '-line'"></div>
                <div class="circle-mini" :class="y + '-' + m + '-circle'"></div>
            </div>
        </template>
        <!-- <p>{{ title }}</p>
        <div class="box-bottom">
            <div class="line"></div>
            <div v-if="this.type == 'mini'" class="circle-mini" :class="title"></div>
            <div v-if="this.type == 'big'" class="circle-big"></div>
        </div> -->
    </div>
</template>

<script>
function debounce(func, delay) {
    let timerId
    return function (...args) {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
            func.apply(this, args)
        }, delay)
    }
}
export default {
    name: 'Test1Timing',
    props: {
        'size': {
            type: String,
            default: 'mini',
            required: false
        },
        'year': {
            type: String,
            required: true
        },
        'month': {
            type: String,
            default: '0',
            required: false
        },
        'classString': {
            type: Object,
            default: null,
            required: false
        }
    },
    data() {
        return {
            type: this.size,
            y: this.year,
            m: this.month,
            cs: this.classString
        };
    },
    watch: {
        classString: {
            handler: debounce(function (newValue, oldValue) {
                if (newValue != null) {
                    this.cs = newValue;
                    this.setSelect(newValue)
                }
            }, 200),
            deep: true
        }
    },
    mounted() {

    },

    methods: {
        setSelect(ob){
            let circle = document.getElementsByClassName(`${ob.year}-${ob.month}-circle`);
            let line = document.getElementsByClassName(`${ob.year}-${ob.month}-line`);
            let bigCircle = document.getElementsByClassName(`${ob.year}-0-circle`);
            let bigLine = document.getElementsByClassName(`${ob.year}-0-line`);

            let contentBox = document.getElementsByClassName('content-box');
            // 往左滚动
            contentBox[0].scrollTop -= 20;
            contentBox[0].scrollLeft += 20

            circle[0].classList.add('circle-active');
            line[0].classList.add('line-active');
            bigCircle[0].classList.add('circle-active');
            bigLine[0].classList.add('line-active');
        }
    },
};
</script>

<style lang="less" scoped>
.timing-box {
    width: 100%;
    height: 100%;
    // display: inline;
    margin: 0;
    padding: 0;
    max-width: 90px;
    min-width: 60px;
    // margin-bottom: 13px;

    p {
        padding: 0;
        margin: 0;
        margin-top: 10px;
        color: #66b1ff;
    }

    .box-bottom {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 10px;

        .line {
            width: 100%;
            height: 2px;
            background-color: #072c95;
        }

        .circle-mini {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #0e51b7;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) translateY(7.5px);
        }

        .circle-big {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #1370fb;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) translateY(12.5px);
        }

    }
}
.circle-active{
    background-color: #004cff !important;
    box-shadow: 0px 0px 10px 3px #004cff !important;
}
.line-active{
    background-color: #0073ff !important;
}
</style>